<template>
    <div
        ref="echartsRef"
        :style="{
            width:width,
            height:height
        }">
    </div>
</template>

<script setup lang="ts">
import type {EChartsOption} from 'echarts';
import * as echarts from 'echarts';

const props = withDefaults(defineProps<{
    options: EChartsOption;
    width?: string;
    height?: string;
}>(), {
    width: '500px',
    height: '500px',
});
const echartsRef = ref<HTMLElement>();
let echartsInstance: any = undefined;
onMounted(() => {
    echartsInstance = echarts.init(unref(echartsRef));
    echartsInstance.setOption(props.options);
});
watch(() => props.options, () => {
    if (echartsInstance) {
        echartsInstance.setOption(props.options, {
            notMerge: true,
        });
    }
}, {deep: true});
</script>
<style scoped>

</style>
